<script setup name="BizOrderIndex">
import eventBus from "@/utils/eventBus";
import { usePagination } from "@/utils/composables";
import { parseTime, addDateRange } from "@/utils/aidex";
import {
  listBizOrder,
  delBizOrder
  // getAllOrderAmount
} from "@/api/biz/bizOrder";
const { pagination, getParams, onSizeChange, onCurrentChange, onSortChange } =
  usePagination();
const router = useRouter();
const props = defineProps({
  id: {
    type: [Number, String],
    default: ""
  }
});
const data = ref({
  activeName: "first",
  loading: false,

  allorderamounts: undefined,
  /**
   * 详情展示模式
   * router 路由跳转
   * dialog 对话框
   * drawer 抽屉
   */
  formMode: "drawer",
  // 详情
  formModeProps: {
    visible: false,
    id: "",
    orderDetailsList: []
  },
  // 搜索
  search: {
    orderId: "",
    userInfoId: props.id
  },
  // 批量操作
  batch: {
    enable: false,
    selectionDataList: []
  },
  // 列表数据
  dataList: [],
  isTj: false
});

// 页面挂载时 调用
onMounted(() => {
  getDataList();
  if (data.value.formMode === "router") {
    eventBus.on("get-data-list", () => {
      getDataList();
    });
  }
  // findallorderamounts();
});
//
onBeforeUnmount(() => {
  if (data.value.formMode === "router") {
    eventBus.off("get-data-list");
  }
});

// 每页数量切换
function sizeChange(size) {
  onSizeChange(size).then(() => getDataList());
}

// 当前页码切换（翻页）
function currentChange(page = 1) {
  onCurrentChange(page).then(() => getDataList());
}

// 字段排序
function sortChange(prop, order) {
  onSortChange(prop, order).then(() => getDataList());
}
// 付款

// 批量打款

// 查询
function getDataList() {
  data.value.loading = true;
  let params = getParams();

  data.value.search.orderId && (params.orderId = data.value.search.orderId);
  data.value.search.userInfoId && (params.userInfoId = props.id);
  if (props.id) {
    listBizOrder(params).then((res) => {
      data.value.loading = false;
      data.value.dataList = res.data.list;
      pagination.value.total = res.data.total;
    });
  }
  data.value.loading = false;
}
// function findallorderamounts() {
//   data.value.loading = true;
//   let params = getParams();
//   data.value.search.userInfoId && (params.userInfoId = props.id);
//   if (props.id) {
//     getAllOrderAmount(params).then((res) => {
//       data.value.loading = false;
//       data.value.allorderamounts = res.data;
//     });
//   }
//   data.value.loading = false;
// }

function onDel(row) {
  const ids =
    row.id ||
    data.value.batch.selectionDataList.map((item) => {
      return item.id;
    });

  if (ids.length > 0) {
    ElMessageBox.confirm("确认删除吗？", "确认信息")
      .then(() => {
        delBizOrder(ids).then((res) => {
          getDataList();
          if (res.code == 200)
            ElMessage.success({
              message: "删除成功",
              center: true
            });
        });
      })
      .catch(() => {});
  } else {
    ElMessage.warning({ message: "请选择数据", center: true });
  }
}

function handleClick(tab, event) {
  console.log(data.value.activeName, tab.paneName);
  if (tab.paneName == "first") {
    data.value.search.status = "3";
  }
  if (tab.paneName == "second") {
    data.value.search.status = "4";
  }
  if (tab.paneName == "third") {
    data.value.search.status = "5";
  }
  if (tab.paneName == "fourth") {
    data.value.search.status = "6";
  }
  getDataList();
}
</script>

<template>
  <div>
    <page-main style="height: calc(100vh - 280px); margin: 0">
      <search-bar>
        <el-form
          :model="data.search"
          size="default"
          label-width="auto"
          label-suffix=""
        >
          <el-row :gutter="30">
            <el-col :span="8">
              <el-form-item label="订单编号">
                <el-input
                  v-model="data.search.userId"
                  placeholder="请输入订单编号"
                  clearable
                  @keydown.enter="currentChange()"
                  @clear="currentChange()"
                />
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item>
                <el-button type="primary" @click="currentChange()">
                  <template #icon>
                    <el-icon>
                      <svg-icon name="ep:search" />
                    </el-icon>
                  </template>
                  查询
                </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="">
                总订单金额:<span style="margin-left: 20px"
                  >¥：
                  {{
                    parseFloat(
                      data.allorderamounts ? data.allorderamounts : 0
                    ).toFixed(2)
                  }}</span
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </search-bar>

      <div style="height: calc(100vh - 440px); overflow-y: hidden">
        <el-table
          ref="table"
          v-loading="data.loading"
          class="list-table"
          :data="data.dataList"
          border
          highlight-current-row
          row-key="id"
          @sort-change="sortChange"
          @selection-change="data.batch.selectionDataList = $event"
        >
          >
          <el-table-column type="selection" align="center" />
          <el-table-column
            type="index"
            align="center"
            label="序号"
            width="60"
          />

          <el-table-column
            prop="id"
            label="订单编号"
            show-overflow-tooltip
            align="center"
            width="200"
          >
            <template v-slot="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>

          <el-table-column
            prop="amount"
            label="订单金额"
            show-overflow-tooltip
            align="right"
          >
            <template v-slot="scope"> ¥&nbsp;{{ scope.row.amount }} </template>
          </el-table-column>

          <el-table-column
            prop="remark"
            label="投放驿站"
            show-overflow-tooltip
            align="center"
          >
            <template v-slot="scope">
              {{ scope.row.equInfo.equXinghao }}
            </template>
          </el-table-column>
          <el-table-column
            prop="userName"
            label="分拣人"
            show-overflow-tooltip
            align="center"
            width="100"
          >
            <template v-slot="scope">
              {{ scope.row.userName }}
            </template>
          </el-table-column>
          <el-table-column
            prop="isOpenId"
            label="付款类型"
            show-overflow-tooltip
            align="center"
            width="100"
          >
            <template v-slot="scope">
              {{ scope.row.isOpenId ? "线上付款" : "线下付款" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            show-overflow-tooltip
            align="center"
          >
            <template v-slot="scope">
              <el-tag v-if="scope.row.status == '0'">已入库，待付款</el-tag>
              <!-- <el-tag v-if="scope.row.status=='1'">已</el-tag> -->
              <el-tag v-if="scope.row.status == '2'" type="success"
                >已完成</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="入库时间"
            show-overflow-tooltip
            width="180"
            align="center"
          >
            <template v-slot="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-pagination
        :current-page="pagination.page"
        :total="pagination.total"
        :page-size="pagination.size"
        :page-sizes="pagination.sizes"
        :layout="pagination.layout"
        :hide-on-single-page="false"
        class="pagination"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </page-main>
    <FormMode
      v-if="['dialog', 'drawer'].includes(data.formMode)"
      :id="data.formModeProps.id"
      v-model="data.formModeProps.visible"
      :mode="data.formMode"
      :orderDetailsList="data.formModeProps.orderDetailsList"
      @success="getDataList"
    />
  </div>
</template>

<style lang="scss" scoped>
.el-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
